<script lang="ts" setup>
import dayjs from 'dayjs'

const schema = [
    { label: '重点企业', field: 'total', rateField: 'totalrate' },
    { label: '非重点企业', field: 'totalFzd', rateField: 'totalFzdRate' },
    { label: '严格管控', field: 'totalYg', rateField: 'totalYgRate' },
    { label: '一般管控', field: 'totalYb', rateField: 'totalYbRate' },
]
const infoData = ref<Record<string, number>>({
    total: 267,
    totalrate: 0.24,
    totalFzd: 209,
    totalFzdRate: 0.24,
    totalYg: 14,
    totalYgRate: 0.24,
    totalYb: 617,
    totalYbRate: 0.24,
})

const thisYear = dayjs().year()

</script>
<template>
    <div>
        <div class="flex-1 text-20px font-PangMen">分级管控({{ thisYear }})</div>
        <div class="flex gap-16px mt-20px">
            <div
                v-for="item in schema"
                :key="item.field"
                class="bg-#7ccfff14 rounded-4px p-[8px_12px] flex-1"
            >
                <div class="text-18px">{{ item.label }}</div>
                <div class="">
                    <span class="">
                        <span class="text-32px color-#01FF85 fw-600">{{
                            infoData[item.field] || 0
                        }}</span>
                        <span class="text-14px ml-2px">家</span>
                    </span>
                    <span class="bg-#7ccfff14 rounded-4px p-[0_4px] ml-10px">
                        <span class="text-14px">{{ infoData[item.rateField] || 0 }}%</span>
                        <!-- <img class="w-10px ml-4px"  src="@/assets/imgs/enterpriseIntelligent/down.svg" alt="" v-if="infoData[item.rateField] < 0"> -->
                        <img
                            class="w-10px ml-4px"
                            src="@/assets/imgs/enterpriseIntelligent/up.svg"
                            alt=""
                        />
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>
<style></style>
